<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>位置管理 - 智能仓储管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background-color: #343a40;
            color: white;
            font-weight: bold;
        }
        .sidebar {
            height: 100vh;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #343a40;
            padding-top: 20px;
        }
        .sidebar a {
            padding: 15px 20px;
            text-decoration: none;
            font-size: 18px;
            color: #adb5bd;
            display: block;
            transition: 0.3s;
        }
        .sidebar a:hover {
            color: white;
            background-color: #495057;
        }
        .main-content {
            margin-left: 250px;
            padding: 20px;
        }
        .location-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 15px;
        }
        .location-card {
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 15px;
            transition: transform 0.3s, box-shadow 0.3s;
            cursor: pointer;
            background-color: white;
        }
        .location-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .location-occupied {
            border-color: #28a745;
        }
        .location-empty {
            border-color: #dc3545;
        }
        .location-header {
            font-weight: bold;
            font-size: 18px;
            margin-bottom: 10px;
            text-align: center;
        }
        .location-status {
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
        }
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
            }
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <div class="sidebar col-md-2">
        <div class="text-center mb-5">
            <h2 class="text-white">智能仓储</h2>
        </div>
        <a href="/">首页</a>
        <a href="/items">物品管理</a>
        <a href="/locations">位置管理</a>
        <a href="/logs">出入库记录</a>
    </div>

    <div class="main-content">
        <div class="container-fluid">
            <h1 class="mb-4">位置管理</h1>
            
            <!-- 仓库可视化图表 -->
            <div class="row mb-5">
                <div class="col-md-4">
                    <div class="card">
                        <div class="card-header">仓库位置统计</div>
                        <div class="card-body">
                            <canvas id="locationChart"></canvas>
                        </div>
                    </div>
                </div>
                <div class="col-md-8">
                    <div class="card">
                        <div class="card-header">位置概览</div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <div class="h4">{{ total_locations }}</div>
                                        <div class="text-muted">总位置数</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <div class="h4 text-success">{{ occupied_locations }}</div>
                                        <div class="text-muted">已使用</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <div class="h4 text-danger">{{ empty_locations }}</div>
                                        <div class="text-muted">空闲</div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="text-center">
                                        <button id="addLocationBtn" class="btn btn-primary">添加位置</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 位置卡片网格 -->
            <div class="card mb-4">
                <div class="card-header">仓库位置列表</div>
                <div class="card-body">
                    <div class="location-grid">
                        {% for location in locations %}
                        <div class="location-card {{ 'location-occupied' if location[2] > 0 else 'location-empty' }}" data-id="{{ location[0] }}">
                            <div class="location-header">{{ location[1] }}</div>
                            <div>存储物品数: {{ location[2] }}</div>
                            <div>总容量: {{ location[3] }}</div>
                            <div class="location-status {{ 'text-success' if location[2] > 0 else 'text-danger' }}">
                                {{ '已占用' if location[2] > 0 else '空闲' }}
                            </div>
                        </div>
                        {% else %}
                        <div class="col-12 text-center">
                            <p>暂无位置数据</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <!-- 位置详情表格 -->
            <div class="card">
                <div class="card-header">位置详细信息</div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>位置名称</th>
                                    <th>当前存储物品数</th>
                                    <th>最大容量</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for location in locations %}
                                <tr>
                                    <td>{{ location[0] }}</td>
                                    <td>{{ location[1] }}</td>
                                    <td>{{ location[2] }}</td>
                                    <td>{{ location[3] }}</td>
                                    <td>
                                        <span class="badge {{ 'badge-success' if location[2] > 0 else 'badge-danger' }}">
                                            {{ '已占用' if location[2] > 0 else '空闲' }}
                                        </span>
                                    </td>
                                    <td>
                                        <button class="btn btn-primary btn-sm view-btn" data-id="{{ location[0] }}">查看物品</button>
                                        <button class="btn btn-danger btn-sm delete-location-btn" data-id="{{ location[0] }}">删除</button>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="6" class="text-center">暂无位置数据</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加位置模态框 -->
    <div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="locationModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="locationModalLabel">添加新位置</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="locationForm">
                        <div class="form-group">
                            <label for="location_name">位置名称 *</label>
                            <input type="text" class="form-control" id="location_name" required>
                        </div>
                        <div class="form-group">
                            <label for="capacity">最大容量 *</label>
                            <input type="number" class="form-control" id="capacity" min="1" value="10" required>
                        </div>
                        <div class="form-group">
                            <label for="description">描述</label>
                            <textarea class="form-control" id="description"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submitLocationForm">添加</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 位置物品列表模态框 -->
    <div class="modal fade" id="locationItemsModal" tabindex="-1" role="dialog" aria-labelledby="locationItemsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="locationItemsModalLabel">位置物品列表</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive" id="locationItemsTableContainer">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>物品名称</th>
                                    <th>RFID标签ID</th>
                                    <th>数量</th>
                                    <th>类别</th>
                                    <th>入库时间</th>
                                </tr>
                            </thead>
                            <tbody id="locationItemsTableBody">
                                <!-- 动态内容将通过AJAX加载 -->
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteLocationModal" tabindex="-1" role="dialog" aria-labelledby="deleteLocationModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteLocationModalLabel">确认删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>确定要删除这个位置吗？如果该位置有存储的物品，此操作将导致物品位置信息丢失。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteLocation">删除</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            let currentLocationId = null;
            
            // 添加位置按钮点击事件
            $('#addLocationBtn').click(function() {
                $('#locationForm')[0].reset();
                $('#locationModal').modal('show');
            });

            // 查看位置物品按钮点击事件
            $('.view-btn').click(function() {
                currentLocationId = $(this).data('id');
                const locationName = $(this).closest('tr').find('td:nth-child(2)').text();
                $('#locationItemsModalLabel').text(`${locationName} - 物品列表`);
                
                // 加载位置物品数据
                $.ajax({
                    url: `/api/location_items/${currentLocationId}`,
                    type: 'GET',
                    success: function(data) {
                        const tableBody = $('#locationItemsTableBody');
                        tableBody.empty();
                        
                        if (data.items.length > 0) {
                            data.items.forEach(item => {
                                const row = `<tr>
                                    <td>${item[0]}</td>
                                    <td>${item[1]}</td>
                                    <td>${item[2]}</td>
                                    <td>${item[3]}</td>
                                    <td>${item[4]}</td>
                                </tr>`;
                                tableBody.append(row);
                            });
                        } else {
                            tableBody.append('<tr><td colspan="5" class="text-center">该位置暂无物品</td></tr>');
                        }
                        
                        $('#locationItemsModal').modal('show');
                    },
                    error: function() {
                        alert('加载位置物品失败，请重试。');
                    }
                });
            });

            // 位置卡片点击事件
            $('.location-card').click(function() {
                currentLocationId = $(this).data('id');
                const locationName = $(this).find('.location-header').text();
                $('#locationItemsModalLabel').text(`${locationName} - 物品列表`);
                
                // 加载位置物品数据
                $.ajax({
                    url: `/api/location_items/${currentLocationId}`,
                    type: 'GET',
                    success: function(data) {
                        const tableBody = $('#locationItemsTableBody');
                        tableBody.empty();
                        
                        if (data.items.length > 0) {
                            data.items.forEach(item => {
                                const row = `<tr>
                                    <td>${item[0]}</td>
                                    <td>${item[1]}</td>
                                    <td>${item[2]}</td>
                                    <td>${item[3]}</td>
                                    <td>${item[4]}</td>
                                </tr>`;
                                tableBody.append(row);
                            });
                        } else {
                            tableBody.append('<tr><td colspan="5" class="text-center">该位置暂无物品</td></tr>');
                        }
                        
                        $('#locationItemsModal').modal('show');
                    },
                    error: function() {
                        alert('加载位置物品失败，请重试。');
                    }
                });
            });

            // 删除位置按钮点击事件
            $('.delete-location-btn').click(function() {
                currentLocationId = $(this).data('id');
                $('#deleteLocationModal').modal('show');
            });

            // 确认删除位置
            $('#confirmDeleteLocation').click(function() {
                $.ajax({
                    url: '/api/delete_location/' + currentLocationId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.success) {
                            alert('位置删除成功！');
                            $('#deleteLocationModal').modal('hide');
                            location.reload();
                        } else {
                            alert('删除失败：' + response.message);
                        }
                    },
                    error: function() {
                        alert('请求失败，请重试。');
                    }
                });
            });

            // 提交位置表单
            $('#submitLocationForm').click(function() {
                const formData = {
                    location_name: $('#location_name').val(),
                    capacity: parseInt($('#capacity').val()),
                    description: $('#description').val()
                };

                $.ajax({
                    url: '/api/add_location',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(response) {
                        if (response.success) {
                            alert('位置添加成功！');
                            $('#locationModal').modal('hide');
                            location.reload();
                        } else {
                            alert('添加失败：' + response.message);
                        }
                    },
                    error: function() {
                        alert('请求失败，请重试。');
                    }
                });
            });

            // 绘制位置统计图表
            const ctx = document.getElementById('locationChart').getContext('2d');
            new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['已占用', '空闲'],
                    datasets: [{
                        data: [{{ occupied_locations }}, {{ empty_locations }}],
                        backgroundColor: [
                            '#28a745',
                            '#dc3545'
                        ]
                    }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });
        });
    </script>
</body>
</html>